<template>
  <!-- 访客记录-详情 -->
  <public-modal
    width="980px"
    :footer="false"
    :title="title"
    modalStyle="detailModal"
    :publicVisible="publicVisible"
    cancelContext="取消"
    confirmContext="提交"
    @handleOk="handleOk"
    @cancel="cancel"
  >
    <div slot="content" class="content">
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        class="formStyle"
        autocomplete="off"
        layout="inline"
        :labelCol="{ style: 'width: 140px' }"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="项目企业名称" prop="projectCompanyName">
              <a-input
                :maxLength="30"
                autocomplete="off"
                placeholder="请填写项目企业名称"
                v-model="form.projectCompanyName"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="项目企业分类" prop="projectCompanyType">
              <a-select ref="select" v-model="form.projectCompanyType" placeholder="请选择项目企业分类">
                <a-select-option v-for="(item, index) in project_company_type" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="项目企业负责人" prop="projectUserName">
              <a-input
                :maxLength="30"
                autocomplete="off"
                placeholder="请填写项目企业负责人"
                v-model="form.projectUserName"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="联系方式" prop="projectUserMobile">
              <a-input
                :maxLength="30"
                autocomplete="off"
                placeholder="请填写联系方式"
                v-model="form.projectUserMobile"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-item label="经度" prop="lng">
              <a-input
                :maxLength="30"
                autocomplete="off"
                :disabled="true"
                placeholder="请在地图上选择经纬度"
                v-model="form.lng"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item label="纬度" prop="lat">
              <a-input
                :maxLength="30"
                autocomplete="off"
                :disabled="true"
                placeholder="请在地图上选择经纬度"
                v-model="form.lat"
              />
            </a-form-item>
          </a-col>
          <a-col :span="1">
            <img
              @click="showMap"
              class="select-map-img cursor"
              style="width: 40px; height: 40px"
              src="@/assets/imgs/in-map.png"
            />
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="办公地址" prop="addressDetail">
              <a-input :maxLength="30" autocomplete="off" placeholder="请填写办公地址" v-model="form.addressDetail" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="包联领导(A角)" prop="leaderOneName">
              <a-input
                :maxLength="10"
                autocomplete="off"
                placeholder="请填写包联领导姓名"
                v-model="form.leaderOneName"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="领导职务" prop="leaderOnePosition">
              <a-input
                :maxLength="10"
                autocomplete="off"
                placeholder="请填写领导职务"
                v-model="form.leaderOnePosition"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="包联领导(B角)" prop="leaderTwoName">
              <a-input
                :maxLength="10"
                autocomplete="off"
                placeholder="请填写包联领导姓名"
                v-model="form.leaderTwoName"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="领导职务" prop="leaderTwoPosition">
              <a-input
                :maxLength="10"
                autocomplete="off"
                placeholder="请填写领导职务"
                v-model="form.leaderTwoPosition"
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="24" :style="{ height: computedHeight + 'px' }">
            <a-form-model-item label="包联民(辅)警" prop="policeUserIdList" class="check-item">
              <a-checkbox-group v-model="form.policeUserIdList">
                <a-col :span="3" v-for="(item, index) in police_list" :key="index" style="height: auto">
                  <a-checkbox :value="item.id">{{ item.userName }}</a-checkbox>
                </a-col>
              </a-checkbox-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <t-map :visible.sync="isShowMap" @getLatLong="getLatLong" ref="tMap"></t-map>
    </div>
  </public-modal>
</template>
<script>
import publicModal from '@/components/publicModal'
import { getAction, postAction } from '@/api/manage'
import { ajaxGetDictItems } from '@/api/api'
import TMap from '@/components/t-map/index.vue'
export default {
  name: 'detailModal',
  components: { publicModal, TMap },
  computed: {
    computedHeight() {
      const minHeight = 40
      const itemHeight = 21
      const { length } = this.police_list
      return Math.max(minHeight, Math.ceil(length / 8) * itemHeight)
    },
  },
  data() {
    let policeUserIdListValidate = async (rule, value) => {
      if (!value || !value.length) {
        return Promise.reject('请选择包联民(辅)警')
      } else {
        return Promise.resolve()
      }
    }
    return {
      isShowMap: false,
      publicVisible: false,
      form: {},
      record: {},
      rules: {
        projectCompanyName: [{ required: true, message: '请填写项目企业名称!' }],
        projectCompanyType: [{ required: true, message: '请选择项目企业分类!' }],
        projectUserName: [{ required: true, message: '请填写项目企业负责人!' }],
        projectUserMobile: [{ required: true, message: '请填写联系方式!' }],
        lng: [{ required: true, message: '请在地图上选择经纬度!' }],
        lat: [{ required: true, message: '请在地图上选择经纬度!' }],
        addressDetail: [{ required: true, message: '请填写办公地址!' }],
        leaderOneName: [{ required: true, message: '请填写包联领导(A角)姓名!' }],
        leaderOnePosition: [{ required: true, message: '请填写领导职务(A角)!' }],
        leaderTwoName: [{ required: true, message: '请填写包联领导(B角)姓名!' }],
        leaderTwoPosition: [{ required: true, message: '请填写领导职务(B角)!' }],
        policeUserIdList: [{ validator: policeUserIdListValidate, trigger: 'change' }],
      },
      police_list: [],
      project_company_type: [],

      policeAgencyId: '',
    }
  },
  methods: {
    async getDist() {
      let { result: project_company_type } = await ajaxGetDictItems({ code: 'project_company_type' })
      this.project_company_type = project_company_type

      let { policeAgencyId } = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
      this.policeAgencyId = policeAgencyId
      let {
        result: { records },
      } = await getAction('/police/user/page', { policeAgencyId, pageSize: 99999 })

      this.police_list = records.map((item) => ({
        id: item.id,
        userName: item.userName,
      }))
    },

    show(record) {
      this.title = '新增项目企业'
      this.publicVisible = true
      this.record = record
      this.getDist()

      if (record && record.id) {
        this.title = '编辑项目企业'
        this.form = { ...record }
        this.form.projectCompanyType = record.projectCompanyType.toString()
      }
    },

    showMap() {
      this.isShowMap = true
    },

    getLatLong(value) {
      this.form.lng = value[0]
      this.form.lat = value[1]
    },

    async handleOk() {
      // this.form.projectContent = '测试'
      this.form.policeAgencyId = this.policeAgencyId

      this.$refs.form.validate(async (valid) => {
        if (!valid) return

        if (!this.form.lng) {
          this.$message.error('请在地图上选择经度')
          return
        }

        if (!this.form.lat) {
          this.$message.error('请在地图上选择纬度')
          return
        }

        let res
        if (this.record && this.record.id) {
          res = await postAction('/common/project_company/edit', this.form)
        } else {
          res = await postAction('/common/project_company/add', this.form)
        }
        if (res.code == 200) this.cancel()
      })
    },

    cancel() {
      this.form = {}
      this.publicVisible = false
      this.$emit('refresh')
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 20px;
}

/deep/ .ant-checkbox-wrapper {
  color: #509eee;
}
/deep/ .ant-checkbox-disabled + span {
  color: #509eee;
}

.ant-select-selection__placeholder {
  display: block;
}

.formStyle {
  padding: 0;
}

.check-item /deep/ .ant-form-item-children {
  display: block;
  width: 100%;
  .ant-checkbox-group {
    width: 100%;
  }
}
</style>
